<template>
  <div class="seat">
    <div class="step">
      <el-steps :active="2" align-center>
        <el-step title="步骤1" description="选择电影场次"></el-step>
        <el-step title="步骤2" description="选择座位号"></el-step>
        <el-step title="步骤3" description="加入购物车字"></el-step>
        <el-step title="步骤4" description="结算付款"></el-step>
      </el-steps>
    </div>
    <el-container class="main">
      <el-aside class="left" style="width: 38%">
        <img src="../assets/filmImg/mysister.jpg" alt="" />

        <ul>
          <h3>{{ film.name }}</h3>
          <li>类型：{{ film.type }}</li>
          <li>地区：{{ film.region }}</li>
          <li>时长：{{ film.duration }}</li>
        </ul>
        <ul class="ticketinfo">
          <li>
            放映：<span>{{ arrangement.type }}</span>
          </li>
          <li>
            开场：<span style="color: red"
              >{{ arrangement.date }}{{ arrangement.startTime }}</span
            >
          </li>
          <li>
            散场：<span>{{ arrangement.endTime }}</span>
          </li>
          <li>
            票价：<span>￥{{ arrangement.price }}/张</span>
          </li>
        </ul>
        <div class="chosen">
          <p>
            已选座位:
            <el-tag
              v-for="(item, index) in userSelectSeats"
              :key="index"
              type="danger"
              effect="plain"
              style="margin-right: 10px"
              >{{ item }}号</el-tag
            >
          </p>
          <p>
            总计：<span>￥</span
            ><span style="font-size: 26px; font-weight: 700">
              {{ cart.price }}</span
            >
          </p>
        </div>
        <el-input
          placeholder="请输入手机号码"
          style="margin: 40px 0"
          v-model="cart.phone"
        ></el-input>
        <el-button type="danger" round @click="submitSeat" class="btn_add"
          >加入购物车</el-button
        >
      </el-aside>
      <el-main class="right">
        <div class="seat-example">
          <!-- 三种座位的状态 -->
          <div class="select-example example"><span>可选座位</span></div>
          <div class="sold-example example"><span>已售座位</span></div>
          <div class="selected-example example"><span>已选座位</span></div>
        </div>
        <div class="seat-block">
          <img src="../assets/img/seat4.png" alt="" />

          <p>银幕中央</p>
          <div class="screen-line"></div>
        </div>
        <div class="seats-wapper">
          <span v-for="(item, index) in seats" :key="index">
            <span v-if="item.status == 0" class="seat1 sold item" />
            <!-- 状态时0代表不可选，座位是红色的 -->
            <span
              v-if="item.status === 1"
              @click="handleSelect(index)"
              class="seat1 selectable item"
            />
            <!-- 状态是1代表可选，座位是白色的 -->
            <span
              v-if="item.status === 2"
              @click="handleDisSelect(index)"
              class="seat1 selected item"
            />
          </span>
          <!-- 状态是2代表正在选择，座位是绿色的 -->
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      film: {
        name: "我的姐姐",
        region: "中国大陆",
        duration: "130分钟", //时长
        type: "剧情/家庭",
      },
      arrangement: {
        type: "2D放映", //放映类型
        date: "2022-01-24", //放映日期
        startTime: " 06：00：00", //开始时间
        endTime: "08：00：00", //结束时间
        price: 45, //电影价格
      },
      cart: {
        price: 45, //电影总价
        phone: "", //输入手机号 v-model绑定的值
        seats: "",
      },
      seats: [
        {
          status: 1,
        },
        {
          status: 0,
        },
        {
          status: 1,
        },
        {
          status: 0,
        },
        {
          status: 0,
        },
        {
          status: 1,
        },

        {
          status: 1,
        },
        {
          status: 1,
        },
        {
          status: 1,
        },
        {
          status: 1,
        },
        {
          status: 1,
        },
        {
          status: 1,
        },
        {
          status: 1,
        },
      ],
      userSelectSeats: [],
    };
  },
  methods: {
    submitSeat() {
      if (this.checkPhoneAndSeats()) {
        for (var i = 0; i < this.userSelectSeats.length; i++) {
          this.cart.seats += this.userSelectSeats[i] + "号";
        }
        this.$message({
          message: "已经为您成功添加至购物车，请尽快付款吧",
          type: "success",
        });
      }
    }, //加入购物车sss
    handleDisSelect(index) {
      //取消选择
      this.seats[index].status = 1;
      this.userSelectSeats.splice(this.userSelectSeats.indexOf(index + 1), 1);
      this.cart.price = this.arrangement.price * this.userSelectSeats.length;
    },
    handleSelect(index) {
      //可选座位
      if (this.userSelectSeats.length > 3) {
        //第4个
        var d = this.userSelectSeats[0] - 1; //d=7(第一个选中的座位号的下标)
        this.seats[d].status = 1; //让第一个选中的状态变成1
        this.userSelectSeats.splice(0, 1); //删除下标为0的(第一个选中的)
        this.userSelectSeats.push(index + 1); //增加下标为index的座位，index+1为座位号
        this.seats[index].status = 2; //改变下标为index的座位的状态为2
        this.cart.price = this.arrangement.price * this.userSelectSeats.length; //计算总价
      } else {
        this.userSelectSeats.push(index + 1); //index+1是座位号
        this.seats[index].status = 2; //改变座位的状态为2 绿色的
        this.cart.price = this.arrangement.price * this.userSelectSeats.length;
      }
    },
    checkPhoneAndSeats() {
      //校验座位和手机号方法
      if (this.userSelectSeats.length == 0) {
        this.$message({
          message: "请选择要订购的座位",
          type: "warning",
        });
        return false;
      }
      if (this.cart.phone.length !== 11) {
        this.$message({
          message: "请输入11位的电话号码",
          type: "warning",
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="scss">
.seat {
  width: 1100px;
  padding: 30px 0;
  margin: 0 auto;
  .step {
    width: 1100px;
    height: 100px;
    padding: 30px 0;
  }
  .main {
    width: 1000px;
    height: 800px;
    background-color: #fff;
    box-shadow: 5px 6px 8px grey;
    .left {
      padding: 40px;
      background-color: rgb(241, 241, 241);
      color: #7f7f7f;
      img {
        width: 120px;
        height: 160px;
        border: 5px solid lightgrey;
        padding: 3px;
        float: left;
        margin-right: 20px;
        margin-bottom: 30px;
      }

      ul {
        float: left;
        list-style: none;
        font-size: 12px;
        h3 {
          font-size: 16px;
          margin-bottom: 15px;
        }
        li {
          line-height: 20px;
          span {
            color: #000;
          }
        }
      }
      .ticketinfo {
        margin-bottom: 20px;
        clear: both;
        li {
          line-height: 25px;
        }
      }
      .chosen {
        clear: both;
        height: 150px;
        padding: 5px 10px;
        border-top: 1px solid #7f7f7f;
        border-bottom: 1px solid #7f7f7f;
        p {
          line-height: 50px;
          color: #000;
          span {
            color: red;
          }
        }
      }
      .btn_add {
        width: 100%;
        height: 50px;
      }
    }
    .right {
      padding: 60px 30px;
      .seat-example {
        width: 460px;
        height: 40px;
        margin-left: 70px;
        .select-example {
          background: url("../assets/img/seat3.png") no-repeat;
        }
        .sold-example {
          background: url("../assets/img/seat1.png") no-repeat;
        }
        .selected-example {
          background: url("../assets/img/seat2.png") no-repeat;
        }
        .example {
          display: inline-block;
          font-size: 16px;
          color: #666;
          height: 26px;
          padding-left: 38px;
          margin-right: 50px;
        }
      }
      .seat-block {
        width: 560px;
        height: 87px;
        position: relative;
        img {
          width: 560px;
          margin: 0;
        }
        p {
          margin-top: 20px;
          text-align: center;
          font-size: 14px;
          color: #666;
        }
        .screen-line {
          width: 0px;
          height: 320px;
          border-left: 1px dashed #7f7f7f;
          position: absolute;
          left: 50%;
          bottom: -350px;
        }
      }
      .seats-wapper {
        width: 480px;
        height: 400px;
        padding: 30px 10px;
        margin: 0 30px;
        .seat1 {
          display: inline-block;
          font-size: 0;
          width: 30px;
          height: 26px;
          margin: 0 5px;
          background: url("../assets/img/seat3.png") no-repeat;
          background-position: 0 1px;
        }
        .sold {
          background-image: url("../assets/img/seat1.png");
        }
        .selected {
          background-image: url("../assets/img/seat2.png");
        }
      }
    }
  }
}
</style>